import React, { useState, useCallback, memo } from "react";

const HYButton = memo((props) => {
  console.log("HYButton 重新渲染");
  return <button onClick={props.incremt}>HYButton +1</button>;
});

export default function CallbackHookDemo01() {
  console.log("CallbackHookDemo01 重新渲染");

  const [count, setCount] = useState(0);
  const [show, setShow] = useState(true);

  const incremt1 = () => {
    console.log("执行incremt1函数");
    setCount(count + 1);
  };

  const incremt2 = useCallback(() => {
    console.log("执行incremt2函数");
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h2>CallbackHookDemo01：{count}</h2>
      {/* <button onClick={incremt}>+1</button>
      <button onClick={incremt2}>+1</button> */}

      <HYButton incremt={incremt1}></HYButton>
      <HYButton incremt={incremt2}></HYButton>
      <button onClick={(e) => setShow(!show)}>show切换</button>
    </div>
  );
}
